<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table{
            border:1px solid red;
            width:400px;
            height: 50px;
            text-align: center;
            line-height: 50px;;
        }
    </style>
</head>
<body>
    <table border="1"  cellspacing="0" cellpadding="0"  align="center">
        <thead>
            <tr>
                <th>姓名</th>
                <th>科目</th>
                <th>成绩</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
           
        <script>
            //创建一个数组，数组里面包含多个object
            var lists=[
                {name:"小红",subject:'数学',age:12},
                {name:"小李",subject:'英语',age:11},
                {name:"小白",subject:'语文',age:12}
            ];
            //获取tbody
            var tbody=document.querySelector('tbody');
            var length =lists.length;   //得出需要几个行
            for(var i=0;i<length;i++){
                //创建行
                var tr =document.createElement('tr');
                //添加行
                tbody.appendChild(tr);
                
                //通过for循环判断对象里面的元素有几个，则行里面就有几个格
                for(var k in lists[i]){
                    //创建td
                    var td =document.createElement('td');
                    //将内容添加到单元格中
                    td.innerHTML=lists[i][k];
                    //添加单元格
                    tr.appendChild(td);

                }
                //创建带有删除的单元格
                var del_td = document.createElement('td');
                //在del_td里面添加a标签，a标签里面放删除俩字
                del_td.innerHTML='<a href="javascript:;">删除</a>';
                //把带有删除字样的单元格添加到行里
                tr.appendChild(del_td);

            }
            //获取所有的a标签
            var as = document.querySelectorAll('a');
            //通过循环让a标签被点击时删除行
            for(var i=0;i<as.length;i++){
                as[i].onclick=function(){
                    //要删除的行标签是a标签的父亲的父亲
                    tbody.removeChild(this.parentNode.parentNode);
                }
            }
            
        </script>
    </table>
</body>
</html>
